<template>
    <div class="common-layout">
        <el-row>
            <CopyStocksToClipboard :stocks="getStocks()"/>
            <el-button @click="corr()">corr</el-button>
            <el-button @click="multi()">multi</el-button>
        </el-row>
        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="700" style="width: 100%"
            @sort-change="sortChange"
            :default-sort="state.sort"
            :cell-class-name="tableCellClassName"
             >
                <el-table-column prop="stock1" label="stock1" width="150" />
                <el-table-column prop="stock2" label="stock2" width="150" />
                <el-table-column prop="corr" label="corr" width="120" sortable/>
                <el-table-column prop="lp" label="lp" width="120"/>
                <el-table-column prop="corr详情" label="corr详情" width="120">
                    <template #default="scope">
                        <el-button @click="openNewTableCompare([scope.row.stock1, scope.row.stock2])" type="primary" plain>
                            corr详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { getIndexETFName, getLpClassName } from '../utils/help';
import { reactive, watch } from 'vue';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';
import { getStockCorrByStock } from '../service/stockCorr';
import { openNewTableCompare, openNewTableMulti } from '../router';
import { useRouteQuery } from '../utils/useRoute';

const selectKey = "StockCorr"
const sortPropKey = selectKey + "SortProp"
const sortOrderKey = selectKey + "SortOrder"

const state = reactive({
    stock: '', 
    data: [],
})

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

// 网址传参
let stock = useRouteQuery("stock","")
if(stock) {
    input.value = stock
    state.stock = stock
}

const loadData = () => {
    getStockCorrByStock(input.value).then( res => {
        state.data = res.data
    })
}

loadData()

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    state.stock = newValue
    loadData()
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let property = column.property
    let val =  row[property]
    if (["corr"].includes(property)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (property == "lp") {
        return getLpClassName(val)
    }

    if (property == "stock2") {
        if (getIndexETFName().includes(row.stock2)) {
            return 'lp-warning-row'
        }
    }
    return ''
}

const getStocks = () => {
    let stocks = []
    stocks.push(state.stock)
    state.data.forEach(item => {
        stocks.push(item.stock2)
    })
    return stocks
}

const corr = () => {
    openNewTableCompare(getStocks())
}

const multi = () => {
    openNewTableMulti(getStocks())
}
</script>